<template>
  <div class="listPage">
    <h2>永远相信，美好的事情即将发生</h2>
    <div class="picContainer">
      <img src="../assets/img/home_page.png" alt="">
      <span @click="startWriting" class="defaultBtn primary startWrite">开始写文章</span>
    </div>
    <h2>发现精彩</h2>
    <collumList :list="list"></collumList>
  </div>
</template>

<script lang="ts">
import {defineComponent,computed,getCurrentInstance} from 'vue'
import collumList,{ColumnProps} from "../components/collumList.vue"
import {testData} from '../testData'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {GolbalDataProps} from '../store/index'

export default defineComponent({
  name:'listPage',
  components:{
    collumList
  },
  setup(props,context){
    const store = useStore<GolbalDataProps>()
    const router = useRouter()
    const res:any = getCurrentInstance()
    const list = computed(()=>store.state.columns)
    const addOne = ()=>{
      store.commit('addCount')
      // console.log(store.state)
    }
    const startWriting = ()=>{
      router.push('/startWriting')
    }
    // console.log('comm',store)
    return {
      list:list,
      startWriting
    }
  }
})
</script>

<style lang="less" scoped>
.picContainer{
  width: 62%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  >img{
    width: 100%;
  }
  .startWrite{
    margin-top: 50px;
  }
}
h2{
  margin: 50px 0;
    font-weight: 900;
  }
</style>